import * as d3 from "d3";
import * as fs from "fs";
import GDPpaint from "./GDP.js";
import csvGDP from "./assets/GDP.csv";
import Budgetpaint from "./Budget.js";
import csvBudget from "./assets/Budget.csv";
import Paypaint from "./Pay.js";
import csvPay from "./assets/Pay.csv";

function tianjin_map(d3, geojson) {
    const width = 400;
    const height = 600;

    const status = {
        "天津市": 0,
        "滨海新区": 1,
        "河西区": 2,
        "武清区": 3,
        "和平区": 4,
        "西青区": 5,
        "东丽区": 6,
        "南开区": 7,
        "北辰区": 8,
        "津南区": 9,
        "静海区": 10,
        "河北区": 11,
        "宝坻区": 12,
        "河东区": 13,
        "宁河区": 14,
        "蓟州区": 15,
        "红桥区": 16
    };

    const svg = d3.select("#svgMap")
        .attr("width", width)
        .attr("height", height);

    const projection = d3.geoMercator()
        .center([117.2, 39.1])  // 天津的经纬度中心点
        .scale(15000)  // 调整缩放比例
        .translate([width / 2 - 50 , height / 2 + 100]);

    const path = d3.geoPath().projection(projection);

    const label = svg
        .append("text")
        .attr("text-anchor", "middle")
        .attr("fill", "#304D30")
        .style("visibility", "hidden");

    label
        .append("tspan")
        .attr("class", "areaName")
        .attr("x", 50)
        .attr("y", 40)
        .attr("font-size", "1.5em")
        .text("");

    svg.selectAll("path")
        .data(geojson.features)
        .enter()
        .append("path")
        .attr("d", path)
        .style("fill","#B6C4B6")
        .style("stroke", "black")
        .style("stroke-width", 1)
        .on("mouseover", (event, d) => {
            d3.select(event.target)
                .style("fill", "#304D30")
                .style("stroke-width", 2)
            const name = d.properties.name;
            let currentStatus = status[name];
            // csv 是数据文件
            d3.csv(csvGDP).then((dataGDP, error) => {
                if (error) {
                    console.log(error);
                } else {
                    // console.log(data);
                    GDPpaint(dataGDP, currentStatus);
                }});
            d3.csv(csvPay).then((dataPay, error) => {
                if (error) {
                  console.log(error);
                } else {
                  Paypaint(dataPay,currentStatus);
                }});
            d3.csv(csvBudget).then((dataBudget, error) => {
                if (error) {
                    console.log(error);
                } else {
                    Budgetpaint(dataBudget,currentStatus);
                }});
            label
                .style("visibility", null)
                .select(".areaName")
                .text(name);
        })
        .on("mouseout", (event, d) => {
            d3.select(event.target)
                .style("fill", "#B6C4B6")
                .style("stroke-width", 1);

            d3.csv(csvGDP).then((dataGDP, error) => {
                    if (error) {
                        console.log(error);
                    } else {
                        GDPpaint(dataGDP, 0);
                }});
            d3.csv(csvPay).then((dataPay, error) => {
                if (error) {
                  console.log(error);
                } else {
                  Paypaint(dataPay,0);
                }});
            d3.csv(csvBudget).then((dataBudget, error) => {
                if (error) {
                    console.log(error);
                } else {
                    Budgetpaint(dataBudget,0);
                }});
            label.style("visibility", "hidden");
        });

    return svg.node();
}

export default tianjin_map;